<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>范闲商城-用户中心</title>
	<link rel="stylesheet" type="text/css" th:href="@{/static/css/reset.css}">
	<link rel="stylesheet" type="text/css" th:href="@{/static/css/main.css}">
	<link rel="stylesheet" th:href="@{/static/layui/css/layui.css}">
	<script th:src="@{/static/jquery-2.1.4.js}" type="text/javascript" charset="utf-8"></script>
	<script th:src="@{/static/layui/layui.js}" type="text/javascript" charset="utf-8"></script>
	<script th:src="@{/static/mylayer.js}" type="text/javascript" charset="utf-8"></script>
	<style>
		.avatar-img {
			width: 20px; /* 设置头像图片的宽度 */
			height: 20px; /* 设置头像图片的高度，可以根据需要调整 */
			border-radius: 50%; /* 使图片呈现圆形 */
			margin-right: 10px; /* 设置头像图片与用户名之间的间距，可以根据需要调整 */
		}
		.common_title2 {
			display: flex;
			align-items: center;
		}

		.common_title2 h3, .common_title2 li {
			margin: 0;
			padding: 0 10px;
			list-style: none;
		}

		.common_title2 li {
			display: inline-block;
		}
	</style>
</head>
<body>
	<div th:replace="header::top"></div>

	<div class="search_bar clearfix">
		<a href="/" class="logo fl"><img src="/static/pic/fanxian-mall.png" width="150px" height="60px"></a>
		<div class="sub_page_name fl">|&nbsp;&nbsp;&nbsp;&nbsp;用户中心</div>
		<div class="search_con fr">
			<input type="text" id="searchInput" class="input_text fl" placeholder="搜索商品">
			<input type="button" id="searchButton" class="input_btn fr" value="搜索">
		</div>		
	</div>
	<div class="navbar_con">
		<div class="navbar clearfix">
			<div class="subnav_con fl">
				<h1>全部商品分类</h1>
				<span></span>
				<ul class="subnav" id="LAY_CategoryList">
				</ul>
			</div>
			<ul class="navlist fl">
				<li><a href="/">首页</a></li>
				<li class="interval">|</li>
				<li><a href="/page/list">全部商品</a></li>
				<li class="interval">|</li>
				<li><a href="/page/turntable">抽奖</a></li>
			</ul>
		</div>
	</div>
	<br>

	<div class="main_con clearfix">
		<div class="left_menu_con clearfix">
			<h3>用户中心</h3>
			<ul>
				<li><a href="/page/user/info">· 个人信息</a></li>
				<li><a href="/page/user/order" class="active">· 全部订单</a></li>
				<li><a href="/page/user/site">· 收货地址</a></li>
				<li><a href="/page/user/coupon">· 我的优惠券</a></li>
				<li><a href="/page/user/collect">· 我的收藏</a></li>
				<li><a href="/page/user/footprint">· 我的足迹</a></li>
			</ul>
		</div>
		<div class="right_content clearfix">
				<div class="common_title2">
					<h3><a href="javascript:void(0)" id="allOrder">全部订单</a></h3>
					<li class="">|</li>
					<li><a href="javascript:void(0)"  id="pending">待支付</a></li>
					<li class="">|</li>
					<li><a href="javascript:void(0)"  id="paid">已付款</a></li>
					<li class="">|</li>
					<li><a href="javascript:void(0)"  id="received">待收货</a></li>
					<li class="">|</li>
					<li><a href="javascript:void(0)" id="completed">已收货</a></li>
					<li class="">|</li>
					<li><a href="javascript:void(0)" id="evaluate">已评价</a></li>
					<div class="layui-form-item">
						<div class="layui-input-group">
							<input type="text" placeholder="搜索订单" class="layui-input" id="searchOrderInput">
							<div class="layui-input-split layui-input-suffix" style="cursor: pointer;">
								<i class="layui-icon layui-icon-search" id="searchOrderButton"></i>
							</div>
						</div>
					</div>
				</div>

			<div id="OrderList"></div>
		</div>
	</div>



	<div class="footer">
		<div class="foot_link">
			<a href="#">关于我们</a>
			<span>|</span>
			<a href="#">联系我们</a>
			<span>|</span>
			<a href="#">招聘人才</a>
			<span>|</span>
			<a href="#">友情链接</a>		
		</div>
		<p>CopyRight © 2024 北京鑫鑫科技有限公司 All Rights Reserved</p>
		<p>电话：010-8888888    京ICP备88888888号</p>
	</div>
	<script>
		$('#searchButton').click(function() {
			var searchText = $('#searchInput').val(); // 获取搜索框中的值
			var searchUrl = '/page/list?search=' + encodeURIComponent(searchText); // 构建带有搜索关键字的URL
			window.location.href = searchUrl; // 跳转到另一个页面
		});
		var orderQuery = {
			page: 1,
			limit: 10,
			productName: null,
			status: null,
		};

		$('#allOrder').click(function() {
			orderQuery.status = null;
			sendQuery(); // 发送查询请求
		});

		$('#pending').click(function() {
			orderQuery.status = 10;
			sendQuery(); // 发送查询请求
		});

		$('#paid').click(function() {
			orderQuery.status = 20;
			sendQuery(); // 发送查询请求
		});

		$('#received').click(function() {
			orderQuery.status = 40;
			sendQuery(); // 发送查询请求
		});

		$('#completed').click(function() {
			orderQuery.status = 50;
			sendQuery(); // 发送查询请求
		});

		$('#evaluate').click(function() {
			orderQuery.status = 60;
			sendQuery(); // 发送查询请求
		});

		// 绑定搜索按钮点击事件
		$('#searchOrderButton').click(function() {
			updateOrderQuery(); // 更新 orderQuery 对象
			orderQuery.page=1;
			sendQuery(); // 发送查询请求
		});

		// 页面加载完成后自动执行一次查询
		$(document).ready(function() {
			sendQuery();
		});

		function updateOrderQuery() {
			var searchText = $('#searchOrderInput').val(); // 获取搜索框中的值
			orderQuery.productName = searchText || null; // 更新 orderQuery 中的 model 字段
		}
		function sendQuery() {
			$.post(
					'/order/list',
					orderQuery, // 将 orderQuery 对象作为数据发送
					function (result) {
						if (result.code == 0) {
							renderOrderList(result);
							//page(result.count);
							console.log(result.data);
							console.log(result.count);
							// 更新分页组件的总页数
						}
					},
					'json'
			);
		}


		function renderOrderList(result) {
			console.log(orderQuery)
			if (result.code == 0) {
				var html = ''
				$('#OrderList').empty();
				$(result.data).each(function () {
					if (this.status == 0) {
						html += '<ul class="order_list_th w978 clearfix">'
						html += '	<li class="col01">'+this.createTime+'</li>'
						html += '	<li class="col02" style="width: 320px">订单号：'+this.orderNo+'</li>'
						html += '	<li class="col02 stress">已取消</li>'
						html += '	<li><i class="layui-icon layui-icon-delete" id="deleteOrder"></i></li>'
						html += '</ul>'

						html += '<table class="order_list_table w980" id="'+this.orderNo+'">'
						html += '	<tbody>'
						html += '	<tr>'
						html += '		<td width="55%">'
						$(this.list).each(function () {
							html += '			<ul class="order_goods_list clearfix">'
							html += '				<li class="col01"><img src="'+this.productImage+'"></li>'
							html += '				<li class="col02">'+this.productName+'</li>'
							html += '				<li class="col03">'+this.quantity+'</li>'
							html += '				<li class="col04">'+this.currentUnitPrice+'元</li>'
							html += '			</ul>'
						})
						html += '		</td>'
						html += '		<td width="15%">'+this.payment+'元</td>'
						html += '		<td width="15%">订单已取消</td>'
						html += '		<td width="15%"><a href="javascript:void(0)" class="oper_btn"><em id="orderDetail">订单详情</em></a></td>'
						html += '	</tr>'
						html += '	</tbody>'
						html += '</table>'
					} else if (this.status == 10) {
						html += '<ul class="order_list_th w978 clearfix">'
						html += '	<li class="col01">'+this.createTime+'</li>'
						html += '	<li class="col02" style="width: 320px">订单号：'+this.orderNo+'</li>'
						html += '	<li class="col02 stress">未支付</li>'
						html += '	<li><i class="layui-icon layui-icon-delete" id="deleteOrder"></i></li>'
						html += '</ul>'

						html += '<table class="order_list_table w980" id="'+this.orderNo+'">'
						html += '	<tbody>'
						html += '	<tr>'
						html += '		<td width="40%">'
						$(this.list).each(function () {
							html += '			<ul class="order_goods_list clearfix">'
							html += '				<li class="col01"><img src="'+this.productImage+'"></li>'
							html += '				<li class="col02">'+this.productName+'</li>'
							html += '				<li class="col03">'+this.quantity+'</li>'
							html += '				<li class="col04">'+this.currentUnitPrice+'元</li>'
							html += '			</ul>'
						})
						html += '		</td>'
						html += '		<td width="15%">'+this.payment+'元</td>'
						html += '		<td width="15%">待付款</td>'
						html += '		<td width="15%">'
						html += '			<a href="#" class="oper_btn" id="pay">去付款</a><br>'
						html += '			<a href="javascript:void(0)"><em style="font-size: 10px" id="CancelOrder">取消订单</em></a>'
						html += '		</td>'
						html += '		<td width="15%"><a href="javascript:void(0)" class="oper_btn"><em id="orderDetail">订单详情</em></a><br>'
						html += '						<a href="javascript:void(0)"><em style="font-size: 10px" id="updateOrder">修改订单</em></a></td>'
						html += '	</tr>'
						html += '	</tbody>'
						html += '</table>'
					} else if (this.status == 20) {
						html += '<ul class="order_list_th w978 clearfix">'
						html += '	<li class="col01">'+this.createTime+'</li>'
						html += '	<li class="col02" style="width: 320px">订单号：'+this.orderNo+'</li>'
						html += '	<li class="col02 stress">已支付</li>'
						html += '	<li><i class="layui-icon layui-icon-delete" id="deleteOrder"></i></li>'
						html += '</ul>'
						html += '<table class="order_list_table w980" id="'+this.orderNo+'">'
						html += '	<tbody>'
						html += '	<tr>'
						html += '		<td width="40%">'
						$(this.list).each(function () {
							html += '			<ul class="order_goods_list clearfix">'
							html += '				<li class="col01"><img src="'+this.productImage+'"></li>'
							html += '				<li class="col02">'+this.productName+'</li>'
							html += '				<li class="col03">'+this.quantity+'</li>'
							html += '				<li class="col04">'+this.currentUnitPrice+'元</li>'
							html += '			</ul>'
						})
						html += '		</td>'
						html += '		<td width="15%">'+this.payment+'元</td>'
						html += '		<td width="15%">已付款</td>'
						html += '		<td width="15%"><a href="javascript:void(0)" class="oper_btn"><em id="orderDetail">订单详情</em></a><br>'
						html += '						<a href="javascript:void(0)"><em style="font-size: 10px" id="updateOrder">修改订单</em></a></td>'
						html += '		<td width="15%"><a href="#" class="oper_btn">未发货</a></td>'
						html += '	</tr>'
						html += '	</tbody>'
						html += '</table>'
					} else if (this.status == 40) {
						html += '<ul class="order_list_th w978 clearfix">'
						html += '	<li class="col01">'+this.createTime+'</li>'
						html += '	<li class="col02" style="width: 320px">订单号：'+this.orderNo+'</li>'
						html += '	<li class="col02 stress">待收货</li>'
						html += '	<li><i class="layui-icon layui-icon-delete" id="deleteOrder"></i></li>'
						html += '</ul>'
						html += '<table class="order_list_table w980" id="'+this.orderNo+'">'
						html += '	<tbody>'
						html += '	<tr>'
						html += '		<td width="40%">'
						$(this.list).each(function () {
							html += '			<ul class="order_goods_list clearfix">'
							html += '				<li class="col01"><img src="'+this.productImage+'"></li>'
							html += '				<li class="col02">'+this.productName+'</li>'
							html += '				<li class="col03">'+this.quantity+'</li>'
							html += '				<li class="col04">'+this.currentUnitPrice+'元</li>'
							html += '			</ul>'
						})
						html += '		</td>'
						html += '		<td width="15%">'+this.payment+'元</td>'
						html += '		<td width="15%">已付款</td>'
						html += '		<td width="15%"><a href="javascript:void(0)" class="oper_btn"><em id="orderDetail">订单详情</em></a><br>'
						html += '						<a href="javascript:void(0)"><em style="font-size: 10px" id="updateOrder">修改订单</em></a></td>'
						html += '		<td width="15%"><a href="javascript:void(0)" class="oper_btn" id="logistics">查看物流</a><br>'
						html += '						<a href="javascript:void(0)"><em style="font-size: 10px" id="ConfirmReceipt">确认收货</em></a></td>'
						html += '	</tr>'
						html += '	</tbody>'
						html += '</table>'
					} else if (this.status == 50) {
						html += '<ul class="order_list_th w978 clearfix">'
						html += '	<li class="col01">'+this.createTime+'</li>'
						html += '	<li class="col02" style="width: 320px">订单号：'+this.orderNo+'</li>'
						html += '	<li class="col02 stress">已收货</li>'
						html += '	<li><i class="layui-icon layui-icon-delete" id="deleteOrder"></i></li>'
						html += '</ul>'

						html += '<table class="order_list_table w980" id="'+this.orderNo+'">'
						html += '	<tbody>'
						html += '	<tr>'
						html += '		<td width="40%">'
						$(this.list).each(function () {
							html += '			<ul class="order_goods_list clearfix">'
							html += '				<li class="col01"><img src="'+this.productImage+'"></li>'
							html += '				<li class="col02">'+this.productName+'</li>'
							html += '				<li class="col03">'+this.quantity+'</li>'
							html += '				<li class="col04">'+this.currentUnitPrice+'元</li>'
							html += '			</ul>'
						})
						html += '		</td>'
						html += '		<td width="15%">'+this.payment+'元</td>'
						html += '		<td width="15%">已收货</td>'
						html += '		<td width="15%"><a href="javascript:void(0)" class="oper_btn"><em id="orderDetail">订单详情</em></a><br>'
						html += '						<a href="javascript:void(0)"><em style="font-size: 10px" id="evaluate">去评价</em></a></td>'
						html += '		<td width="15%"><a href="javascript:void(0)" class="oper_btn" id="logistics">查看物流</a></td>'
						html += '	</tr>'
						html += '	</tbody>'
						html += '</table>'
					} else if (this.status == 60) {
						html += '<ul class="order_list_th w978 clearfix">'
						html += '	<li class="col01">'+this.createTime+'</li>'
						html += '	<li class="col02" style="width: 320px">订单号：'+this.orderNo+'</li>'
						html += '	<li class="col02 stress">已评价</li>'
						html += '	<li><i class="layui-icon layui-icon-delete" id="deleteOrder"></i></li>'
						html += '</ul>'

						html += '<table class="order_list_table w980" id="'+this.orderNo+'">'
						html += '	<tbody>'
						html += '	<tr>'
						html += '		<td width="40%">'
						$(this.list).each(function () {
							html += '			<ul class="order_goods_list clearfix">'
							html += '				<li class="col01"><img src="'+this.productImage+'"></li>'
							html += '				<li class="col02">'+this.productName+'</li>'
							html += '				<li class="col03">'+this.quantity+'</li>'
							html += '				<li class="col04">'+this.currentUnitPrice+'元</li>'
							html += '			</ul>'
						})
						html += '		</td>'
						html += '		<td width="15%">'+this.payment+'元</td>'
						html += '		<td width="15%">已评价</td>'
						html += '		<td width="15%"><a href="javascript:void(0)" class="oper_btn"><em id="orderDetail">订单详情</em></a></td>'
						html += '		<td width="15%"><a href="javascript:void(0)" class="oper_btn" id="logistics">查看物流</a></td>'
						html += '	</tr>'
						html += '	</tbody>'
						html += '</table>'
					}
				}),
				$('#OrderList').append(html);
				//$('#updateOrder').click(function() {


				// 绑定事件处理器
				/*$('#OrderList').on('click', '#updateOrder', function () {
					// 在需要的时候解绑事件处理器
					$('#OrderList').unbind('click', '#updateOrder');

					$('#OrderList').on('click', '#updateOrder',function() {

						var orderNo = $(this).closest('table').attr('id');
						layer.open({
							type: 2,
							title: '修改收货地址',
							area: ['50%', '75%'],// 宽高
							content: '/page/order/update?orderNo='+orderNo,
						});

					});
				});*/


				// 确保 DOM 完全加载
				$(document).ready(function() {
					$('#OrderList').on('click', '#updateOrder', function () {
						// 首先解绑所有与此元素相关的 click 事件
						$(this).off('click');

						// 然后重新绑定需要执行的事件处理器
						$(this).on('click', function () {
							// 执行需要的操作，例如打开一个模态框来修改订单
							var orderNo = $(this).closest('table').attr('id');
							layer.open({
								type: 2,
								title: '修改收货地址',
								area: ['50%', '75%'], // 宽高
								content: '/page/order/update?orderNo=' + orderNo,
							});
						});

						// 触发 click 事件以执行上面重新绑定的事件处理器
						//$(this).click();
					});
				});




				$('#OrderList').on('click', '#CancelOrder',function() {

					var orderNo = $(this).closest('table').attr('id');
					layer.confirm(
							'您确定要取消订单吗？',
							{icon : 3},
							function (index) {
								$.post(
										'/order/cancelOrder',
										{'orderNo': orderNo},
										function (result) {
											if (result.code == 0) {
												mylayer.okMsg(result.msg);
												setInterval(function() {
													window.location.reload();
												}, 2000)
											}
										},
										'json'
								);
							}
					)

				});
				$('#OrderList').on('click', '#ConfirmReceipt',function() {

					var orderNo = $(this).closest('table').attr('id');
					layer.confirm(
							'您确定已经收到货物了吗？',
							{icon : 3},
							function (index) {
								$.post(
										'/order/confirmReceipt',
										{'orderNo': orderNo},
										function (result) {
											if (result.code == 0) {
												mylayer.okMsg(result.msg);
												setInterval(function() {
													window.location.reload();
												}, 2000)
											}
										},
										'json'
								);
							}
					)

				});
				$('#OrderList').on('click', '#pay',function() {

					var orderNo = $(this).closest('table').attr('id');
					location.href="/page/pay?orderNo="+orderNo;

				});
				$('#OrderList').on('click', '#evaluate',function() {

					var orderNo = $(this).closest('table').attr('id');
					location.href="/page/order/evaluate?orderNo="+orderNo;

				});
				$('#OrderList').on('click', '#deleteOrder',function() {


					var $ul = $(this).closest('ul');

					// 获取紧接着的 <table> 元素
					var $table = $ul.next('table');

					// 获取该 <table> 的 id
					var orderNo = $table.attr('id');
					layer.confirm(
							'您确定要删除订单吗？',
							{icon : 3},
							function (index) {
								$.post(
										'/order/deleteOrder',
										{'orderNo': orderNo},
										function (result) {
											if (result.code == 0) {
												mylayer.okMsg(result.msg);
												setInterval(function() {
													window.location.reload();
												}, 2000)
											} else {
												mylayer.errorMsg(result.msg);
											}
										},
										'json'
								);
							}
					)

				});
				$('#OrderList').on('click', '#orderDetail',function() {

					var orderNo = $(this).closest('table').attr('id');
					location.href = '/page/order/detail?orderNo='+orderNo;

				});
				$('#OrderList').on('click', '#logistics',function() {

					var orderNo = $(this).closest('table').attr('id');
					location.href = '/page/order/logistics?orderNo='+orderNo;

				});
			}
		}
		function page(count) {
			layui.use(function(){
				var laypage = layui.laypage;
				// 完整显示
				console.log(count)
				// 初始化分页
				laypage.render({
					elem: 'demo-laypage-all', // 元素 id
					count: count, // 假设总数据量
					curr: orderQuery.page, // 设置当前页码
					limit:orderQuery.limit,
					layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'], // 功能布局
					jump: function(obj, first){
						if (!first) { // 首次不执行，避免重复触发
							orderQuery.page = obj.curr; // 根据当前页码获取数据
							orderQuery.limit = obj.limit;
							sendQuery();
						}
					}
				});
			});
		}

		$.post(
				'/category/listAll',
				function (result) {
					if (result.code == 0) {
						$('#LAY_CategoryList').empty();
						$(result.data).each(function () {
							$('#LAY_CategoryList').append('<li><a href="/page/list?parentId=' + this.id + '">'+this.name+'</a></li>');
						})
					}
				},
				'json'
		);
		function logout() {
			layer.confirm(
					'您确认要退出么',
					{icon:3},
					function() {
						$.post(
								'/user/logout',
								function (result) {
									if (result.code == 0) {
										mylayer.okMsg(result.msg);
										setTimeout(function() {
											window.location.reload();
										}, 800);
									}
								},
								'json'
						);
						// location.href = '/admin?method=logout'
					}
			);
		}
	</script>
</body>
</html>